<template>
  <div>
    <Window :showCancel="false" :show="windowConfig.show" :buttons="windowConfig.buttons"
      @close="windowConfig.show = false">
      <div class="my_title">{{ blog.title }}</div>
      <div v-html="blog.content" class="blog_detail"></div>
    </Window>

  </div>
</template>

<script setup>
import { getCurrentInstance, ref, reactive, nextTick } from 'vue'
const { proxy } = getCurrentInstance();
import hljs from "highlight.js"; // 引入highlight.js库
import "highlight.js/styles/atom-one-dark.css";// 引入样式表，这里使用的是Atom One Light风格
  
const api = {
  'getBlogDetail': 'blog/getBlogById',
}
const blog = ref({})

const windowConfig = reactive({
  show: false,
  buttons: [{
    type: 'danger',
    text: '确定',
    click: (e) => {
      windowConfig.show = false;
    }
  }]
})


const showDetail = async (blogId) => {
  windowConfig.show = true;
  let res = await proxy.Request({
    url: api.getBlogDetail,
    params: {
      blogId
    }
  })
  if (!res) {
    return;
  }
  blog.value = res.data
  nextTick(() => {
    // 高亮显示  
    let blocks = document.querySelectorAll('pre code');
    blocks.forEach((block) => {
      hljs.highlightElement(block); //   
    }); 

  });
}


defineExpose({ showDetail })


</script>

<style lang='scss'>
.my_title {
  font-size: 18px;
}

.blog_detail {
  blockquote {
    padding: 0 1em;
    color: #adbfd3;
    border-left: 0.25em solid #dfe2e5;
  }

  img{
    max-width: 80%;
  }
}
</style>